<template>
  <div class="Popup-new-container">
    <div class="color-list" v-if="$route.params.id === '0'">
      <div
        class="color-item"
        :class="{ select: messageData.color === item }"
        v-for="item in color"
        :key="item"
        :style="{ backgroundColor: `rgba(${item},1)` }"
        @click="select(item)"
      ></div>
    </div>
    <div class="addPicture" v-else>
      <div class="add">
        <input
          type="file"
          name="image_url"
          id="file"
          accept="image/*"
          :multiple="false"
          @change="changeImg"
        />
        <span class="iconfont icon-tianjia" v-show="!image_url"></span>
        <div class="edit" v-show="image_url">
          <img src="../../assets/fonts/xiugai .svg" alt="" />
        </div>
      </div>
      <img v-show="image_url" :src="image_url" alt="" />
    </div>
    <div class="input" :style="{ backgroundColor: `rgba(${messageData.color},0.3)` }">
      <textarea
        class="textarea"
        maxlength="104"
        placeholder="留言..."
        v-model="messageData.content"
        name="addComment"
      ></textarea>
      <input
        type="text"
        name="addName"
        class="name-input"
        placeholder="签名"
        v-model="messageData.user_name"
      />
    </div>
    <div class="labels">
      <span class="title">选择标签</span>
      <div class="label-list">
        <span
          class="label-item"
          :class="{ selected: messageData.label === item }"
          v-for="item in labelList[+$route.params.id]"
          :key="item"
          @click="labelSelected(item)"
        >
          {{ item }}
        </span>
      </div>
    </div>
    <div class="text">
      <span class="title">免责声明</span>
      <p>
        为便于与用户交流的留言平台。请不要利用此平台服务制作、上传、下载、复制、发布、传播或者转载如下内容：
      </p>
      <p>1、反对宪法所确定的基本原则的；</p>
      <p>2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p>
      <p>3、损害国家荣誉和利益的； 4、煽动民族仇恨、民族歧视，破坏民族团结的；</p>
      <p>5、破坏国家宗教政策，宣扬邪教和封建迷信的； 6、散布谣言，扰乱社会秩序，破坏社会稳定的；</p>
      <p>7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p>
      <p>8、侮辱或者诽谤他人，侵害他人合法权益的； 9、含有法律、行政法规禁止的其他内容的信息</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const labelList = [
  ['留言', '目标', '理想', '过去', '将来', '爱情', '亲情', '友情', '秘密', '信条', '无题'],
  [
    '我',
    'ta',
    '喜欢的',
    '有意义的',
    '值得纪念的',
    '母校',
    '生活',
    '天空',
    '我在的城市',
    '大海',
    '无题'
  ]
]

import { onBeforeUnmount, reactive, ref, watch } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { useRoute } from 'vue-router'
import { addNoteAPI, addPictureAPI } from '@/api/note'
import { usePopupStore } from '@/stores/modules/Popup'
import { bus } from '@/utils/mitt'
import Message from '@/components/Message/Message.js'

const popupStore = usePopupStore()
const route = useRoute()
const userStore = useUserStore()
/** 可选颜色数据 */
const color = ['252,175,162', '255,227,148', '146,230,245', '168,237,138', '202,167,247']
/** 颜色选中回调 */
const select = (color: string) => {
  messageData.color = color
}
/** 选则标签 */
const labelSelected = (label: string) => {
  messageData.label = label
}
/** 照片回显数据 */
const image_url = ref<string>()
/** 照片选择回调 */
const changeImg = (e: any) => {
  const file = e.target.files[0]
  if (file) {
    image_url.value = URL.createObjectURL(file)
    messageData.image_url = e.target.files[0]
  }
}
/** 留言信息 */
const messageData = reactive<addNoteParams>({
  content: '',
  user_name: '',
  label: labelList[+route.params.id][0],
  color: color[0],
  user_id: userStore?.user,
  type: route.params.id as string,
  image_url: ''
})
/** 添加留言回调 */
const addNote = async () => {
  messageData.type = route.params.id as string
  if (!messageData.user_name) {
    messageData.user_name = '匿名'
  }
  /** 留言未选择 */
  if (!messageData.content && messageData.type === '0') {
    return alert('请输入留言内容')
  }
  /** 照片未选择 */
  if (!messageData.image_url && messageData.type === '1') {
    return alert('请选择照片')
  }
  /** 上传照片，返回url */
  if (messageData.image_url) {
    const formData = new FormData()
    formData.append('file', messageData.image_url)
    const res = await addPictureAPI(formData)
    messageData.image_url = res.data.file_url
  }
  await addNoteAPI(messageData)
  Message({ type: 'success', message: '感谢您的记录' })
  /** 重新获取列表 */
  bus.emit('getNoteList')
  image_url.value = ''
  messageData.image_url = ''
  popupStore.close()
}

watch(popupStore, () => {
  Object.assign(messageData, {
    content: '',
    user_name: '',
    label: labelList[+route.params.id][0],
    color: color[0],
    user_id: userStore?.user,
    type: route.params.id as string,
    image_url: ''
  })
})

defineExpose({ addNote })

onBeforeUnmount(() => {
  bus.off('getNoteList')
})
</script>

<style scoped lang="scss">
.Popup-new-container {
  .color-list {
    width: 100%;
    padding: 10px 0;
    display: flex;

    .color-item {
      width: 25px;
      height: 25px;
      margin-right: 9px;
    }

    .select {
      border: 1px solid #3b73f0;
    }
  }

  .addPicture {
    position: relative;
    min-height: 80px;

    img {
      width: 100%;
      max-height: 250px;
      height: auto;
      object-fit: contain;
    }

    .add {
      position: absolute;
      width: 67px;
      height: 67px;
      margin-bottom: 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        border: 1px solid #000;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        font-size: 25px;
        z-index: 1;
      }

      .edit {
        position: absolute;
        font-size: 25px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        background-color: rgba($gray-1, 0.6);
        width: 80%;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;

        img {
          width: 24px;
          height: 24px;
        }
      }

      input {
        font-size: 0;
        cursor: pointer;
        border-radius: 50%;
        background-color: #fff;
        z-index: 2;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }

  .input {
    transition: all 0.3s;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 240px;
    text-align: center;

    .textarea {
      line-height: 1.5;
      padding: 8px;
      font-family: serif;
      font-size: 15px;
      background-color: transparent;
      width: 100%;
      height: 174px;
      resize: none;
    }

    .name-input {
      background-color: transparent;
      border: 1px solid rgba($gray-10, 0.8);
      padding: 8px;
      text-align: right;
      width: 100%;
      font-family: serif;
      height: 36px;
      font-size: 16px;
      font-weight: 600;
      color: $gray-1;
    }
  }

  .labels {
    width: 100%;
    padding-top: 30px;

    .title {
      font-weight: 600;
    }

    .label-list {
      margin-top: 10px;
      width: calc($right-popup-width - 48px);
      flex-wrap: wrap;
      display: flex;
      transition: all 0.3s;

      .label-item {
        cursor: pointer;
        transition: all 0.3s;
        border: 0;
        padding: 2px 11px;
        margin: 6px 1px;
      }

      .selected {
        color: $gray-0;
        background-color: rgba($gray-2, 0.2);
        font-weight: 600;
        border-radius: 14px;
      }
    }
  }

  .text {
    margin-top: 10px;
    width: calc($right-popup-width - 48px);
    flex-wrap: wrap;
    display: flex;
    transition: all 0.3s;
    color: $gray-2;

    p {
      margin: 2px 0;
    }

    .title {
      font-weight: 600;
      color: $gray-0;
      margin: 10px 0;
    }
  }
}
</style>
